<template>
  <div id="monitor1"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb3.png" />
                   实际预约
                   <el-form ref="form" :model="form" label-width="80px">  
                    <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                       <el-date-picker 
                        :picker-options="pickerOptions"   @change="select_change" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time"  style="width:150px;"></el-date-picker>
                    </el-form-item>
                 </el-form>
             </div> 
               <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
         </div>
         <div class="box">
              <div class="item_a">
                      <div class="item_b" v-for="(item,index) in list_data" :key="index">
                          <div class="item_b_1">
                            <img class="item_b_1_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                            <img class="item_b_1_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                            <img class="item_b_1_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                            <img class="item_b_1_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                            {{ item.title }}
                           </div>
                          <div class="item_b_2">{{ item.real_appointment_number }}</div>
                      </div>
                  </div>
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'monitor1',
  data () {
    return {
       pickerOptions: { // 计费日期的约束条件
        disabledDate(time) {
            return time.getTime() < new Date('2021-02-03').getTime()
            }
      },
      list_data:'',
      form:{
        time:''
      }
    }
  },
   components:{

  },
  created(){
      this.form.time = this.getNowDate1()
      this.list_fun()
  },
  mounted (){
   
  },
  methods: {
      list_fun(){
         this.post("/Control/appointmentList", {
             starttime:this.form.time
	        }).then(res => {
              this.list_data = res.result.splice(0,4);
            // console.log( this.list_data)
         })
    },
    select_change(){
       this.list_fun()
    },
    go_but(){
    this.$router.push({
        path: '/index/operationdata/Monitor/DetailsMonitor1',
        query: {
            name:'实际预约详情',
        }
    })
  }

  }
}
</script>


<style scoped>
#monitor1{
  padding:2px;
}
.con{
   padding:15px;
   border-radius: 7px;  
   box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.box{
    padding: 10px;
    height:200px;
}
.item_a{
  /* display:flex; */
  padding:0px 15px;

}
.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
    margin-top:20px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
.el-input--suffix>>>.el-input__inner{
  height:35px;
}

.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>